<template>
  <div class="AdminHome">
    <Header></Header>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside
        width="200px"
        style="background-color: rgb(47, 93, 89); color: #fff"
      >
        <el-menu router>
          <TreeMenu :tree-data="treeData" />
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <Footer></Footer>
    <toTop></toTop>
  </div>
</template>
<script>
import Header from "@/components/Admin/head.vue";
import Footer from "@/components/Admin/footer.vue";
import treeData from "@/utils/admin.json";
import TreeMenu from "@/components/Admin/TreeMenu.vue";
import toTop from "@/components/toTop.vue";
import { mapState, mapMutations } from "vuex";
import { searchDecade, searchLocal, searchTypes } from "@/api/all";
export default {
  components: {
    Header,
    Footer,
    TreeMenu,
    toTop,
  },
  data() {
    return {
      treeData,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    ...mapMutations("sort", [
      "SET_DECADETYPE",
      "SET_GROUPTYPE",
      "SET_LOCALTYPE",
    ]),
    async init() {
      //获取后端材质分类数据
      await searchTypes()
        .then((res) => {
          if (res.data.code === 200) {
            this.SET_GROUPTYPE(res.data.data.groupTypeList);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style >
@import "~element-ui/lib/theme-chalk/index.css";
.AdminHome {
  height: auto;
  min-height: 100vh;
}
.el-menu {
  background-color: rgba(42, 81, 77, 1);
}
.el-submenu__title {
  color: #e3e2e2 !important;
  background-color: rgba(42, 81, 77, 1);
}
.el-menu-item {
  background-color: rgba(42, 81, 77, 1);
  color: #e3e2e2 !important;
}
.el-menu-item.is-active {
  background-color: rgb(38, 73, 70) !important;
  color: #fff !important;
}
.el-menu-item:focus,
.el-menu-item:hover {
  background-color: rgb(38, 73, 70) !important;
}
.el-submenu__title:hover {
  background-color: rgb(38, 73, 70) !important;
}
.el-submenu [class^="el-icon-"] {
  color: #fff;
}
.icon-wenwuguanli,
.icon-yonghuguanli,
.icon-fenxi {
  color: #fff !important;
  text-align: center !important;
  font-size: 18px !important;
  width: 24px !important;
  margin-right: 5px !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
}
.el-container {
  width: auto !important;
  background: #ebebeb !important;
}
</style>